<template>
  <a-layout>
    <!-- head -->
    <div class="cl-header container-fluid">
      <div class="header-content container">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" href="/">
              <img src="@/assets/images/logo.jpg" width="144" height="72" alt="">
          </a>
          <button class="navbar-toggler" type="button" 
            data-toggle="collapse" 
            data-target="#navbarNav" 
            aria-controls="navbarNav" 
            aria-expanded="false" 
            aria-label="Toggle navigation"
            v-on:click = "showmenu = !showmenu" >
              <span class="navbar-toggler-icon"></span>
          </button>
          <transition name = "slidemenu">
            <div class="collapse navbar-collapse justify-content-end" :class="{ show: showmenu }" id="navbarNav" v-if="showmenu">
              <top-menu :menus="menus"></top-menu>
            </div>
          </transition>
        </nav>
      </div>
    </div>
    <a-layout>
      <!-- content -->
      <div class="cl-cantainer container">
        <div class="row">
          <!-- content left -->
          <div class="col-md-9 cl-left">
            <router-view/>
          </div>
          <!-- content sider -->
          <div class="col-md-3 cl-right">
            <div class="right-card">
              <div class="right-card-main">
                <div class="right-card-title">个人微信号</div>
                <div class="cl-code">
                  <img src="@/assets/images/code.jpg" class="img-fluid" alt="">
                  <p>关注作者获取更多模板信息，定时发布干货文章</p>
                </div>
              </div>
            </div>
            <div class="right-card">
              <div class="right-card-main">
                <div class="right-card-title">热门文章</div>
                <div class="right-recommended"><a href="#"><img src="@/assets/images/list-right.jpg" class="img-fluid" alt=""></a></div>
                <ul class="right-recommended-list">
                  <a-skeleton :loading="loading">
                    <li v-for="item in hotblogs" :key="item.Id">
                      <router-link :to="{ name: 'blogdetail', params: { columnid: item.ColumnId, blogid: item.Id }}">
                        <i class="fa fa-angle-right" aria-hidden="true"></i>{{item.Title}}
                      </router-link>
                    </li>
                  </a-skeleton>
                </ul>
              </div>
            </div>
          </div> <!-- content sider -->
        </div>
      </div> <!-- content -->
    </a-layout>
    <!-- footer -->
    <div class="container-fluid cl-footer">
      <div class="container">
        <p class="cl-copyright">
          <span class="info">{{clientsettings.WebsiteName}}</span>
          <span class="info"><a title="ICP备案" href="http://www.beian.miit.gov.cn" target="_blank">{{clientsettings.WebsiteICP}}</a></span>
          <span class="info" v-if="clientsettings.WebsitePICP">{{clientsettings.WebsitePICP}}</span>
        </p>
        <p class="cl-copyright">博客模板源自<a title="简.工作室荣誉出品" href="https://gitee.com/jeanstudio/calmlog">简.工作室（www.jeanstudio.cn）</a> </p>
        <p class="cl-copyright" v-html="clientsettings.Copyright"></p>
      </div>
    </div>
    <div id="coustombacktop">
      <a-back-top>
        <div class="ant-back-top-inner">
          <a href='https://gitee.com/konkoncar/nowablog' target="_blank" v-on:click.stop="return false;">
          <img src='https://gitee.com/konkoncar/nowablog/widgets/widget_5.svg' alt='Fork me on Gitee' /></a>
        </div>
      </a-back-top>
    </div>
    <a-back-top />
  </a-layout>
</template>

<script>
import { BackTop } from 'ant-design-vue';
import '@/assets/css/cl-css.css'
import { mapState, mapActions } from 'vuex'
import TopMenu from '@/components/Menu/TopMenu'
import { getHotBlogList, getClientSettings } from '@/api'
export default {
  name: 'BasicLayout',
  components: {
    TopMenu,
    ABackTop : BackTop 
  },
  data () {
    return {
      menus: [],
      showmenu: true,
      loading: false,
      hotblogs: [],
      clientsettings: {}
    }
  },
  computed: {
    ...mapState({
      mainmenu: state => state.navmenus,
      languageid: state => state.languageid
    }),
  },
  created () {
    this.menus = this.mainmenu;
  },
  mounted () {
    this.onLoadHotBlogs()
    this.onLoadClientSettings()
  },
  methods: {
    onLoadHotBlogs() {
      this.loading = true;
      let me = this;
      getHotBlogList(this.languageid, 10,
        function(res) { //Success
          me.loading = false;
          me.hotblogs = res.data
        }, function(res) { //Failure
          me.loading = false;
          me.$notification['error']({
            message: '通知消息',
            description: res,
          });
        }
      );
    },
    onLoadClientSettings() {
      let me = this;
      getClientSettings(100,  //PC Settings
        function(res) { //Success
          me.clientsettings = res.data
        }, function(res) { //Failure
          me.$notification['error']({
            message: '通知消息',
            description: res,
          });
        }
      );
    },
  }
}
</script>

<style lang="less">
  .slidemenu-enter-active,
  .slidemenu-leave-active {
    transition: all .3s ease;
  }
  .slidemenu-enter, .slidemenu-leave-to { 
    opacity: 0;
  }
  #coustombacktop .ant-back-top {
    bottom: 100px;
    .ant-back-top-inner {
      height: 40px;
      width: 40px;
      line-height: 40px;
      border-radius: 4px;
      color: #fff;
      text-align: center;
      font-size: 20px;
    }
  }
  .ant-back-top {
    right: 85px;
  }
  .cl-copyright .info {
    margin-right: 5px;
    &:before {
      content: " - ";
    }
  }
</style>
